<script type="text/javascript" src="__STATIC__/uploadify/jquery.uploadify.min.js"></script>
<script type="text/javascript" src="__ADDONROOT__/js/myQuery.js"></script>

<style type="text/css">
    .btn-close{
        position: absolute;
        top: -8px;
        right: -8px;
        width: 17px;
        height: 17px;
        background: url('__ADDONROOT__/images/bg_icon.png') no-repeat -25px 0;
        cursor: pointer;
    }

    .btn-close:hover {
        text-decoration: none;
        border-bottom: 0 none;
    }

    .upload-img-box .upload-pre-item{
        position: relative;
        margin-bottom: 8px;
        overflow: visible;
    }

    /* 上传图片点击弹出层 */
    .upload-img-popup {
        position: fixed;
        z-index: 9999;
        padding: 3px;
        border: 1px solid #c3c3c3;
        background-color: #fff;
        box-shadow: 0 0 4px rgba(0,0,0,.5);
    }

    .upload-img-popup img{
        display: inline-block;
        max-height: 500px;
        max-width: 500px;
        cursor: pointer;
    }

    .upload-img-popup .close-pop {
        position: absolute;
        top: -8px;
        right: -8px;
        width: 17px;
        height: 17px;
        background: url('__ADDONROOT__/images/bg_icon.png') no-repeat -25px 0;
    }
    .upload-img-popup .close-pop:hover {
        text-decoration: none;
        border-bottom: 0 none;
    }
    .upload-img-popup img {
        display: block;
    }
    .upload_icon_all {
        width: 15px;
        height: 15px;
        background: url('__ADDONROOT__/images/attachment_1.png');
        display: inline-block;
        vertical-align: middle;
        margin-right: 5px
    }
</style>
<div id="tab1" class="tab-pane in tab1">
    <div class="controls">
        <input type="file" id="upload_picture">
        <div class="upload-img-box">
            <notempty name="picture">
                 <volist name="picture" id="picture">
                    <div class="upload-pre-item">
                        <input type="hidden" name="icon[]" value="{$picture['id']}" class="icon" />
                        <img src="__ROOT__{$picture['path']}" data-id="{$picture['id']}"/>
                        <span class='btn-close' title='删除图片'></span>
                    </div>
                 </volist>
            </notempty>
        </div>
    </div>
</div>
<script type="text/javascript">
    //上传图片
    /* 初始化上传插件 */
    $("#upload_picture").uploadify({
        "height"          : 30,
        "swf"             : "__STATIC__/uploadify/uploadify.swf",
        "fileObjName"     : "download",
        "buttonText"      : "上传图片",
        "uploader"        : "{:U('File/uploadPicture',array('session_id'=>session_id()))}",
        "width"           : 120,
        'removeTimeout'   : 1,
        'fileTypeExts'    : '*.jpg; *.png; *.gif;',
        "onUploadSuccess" : uploadPicture,
        'onFallback' : function() {
            alert('未检测到兼容版本的Flash.');
        }
    });
    function uploadPicture(file, data){
        var data = $.parseJSON(data);
        var src = '';
        if(data.status){
            console.log('hello');
            console.log(data.status);
            console.log(data.id);

            //创建<div class="upload-pre-item">
            $_upload_item = $("<div class='upload-pre-item'></div>");

            //创建img input close-btn
            $_img_path = $("<input type='hidden' name='icon[]' class='icon' value='"+data.id+"'/>");
            src = data.url || '__ROOT__' + data.path;
            $_upload_img = $("<img src=" + src +" title='点击显示大图' data-id="+data.id+"> ");
            $_img_del = $("<span class='btn-close' title='删除图片'></span>");

//            $_img_path.val(data.id);

            //加入到upload-img-box

            $_upload_item.append($_upload_img);
            $_upload_item.append($_img_del);
//            $_upload_item.append($_img_path);

            $("#tab1 .controls").append($_img_path);
//            $_upload_img.data("id",data.id);

            $(".icon").parent().find('.upload-img-box').append($_upload_item);
        } else {
            updateAlert(data.info);
            setTimeout(function(){
                $('#top-alert').find('button').click();
                $(that).removeClass('disabled').prop('disabled',false);
            },1500);
        }
    }
</script>